<template>
  <div class="translateContent">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="translateMain">
      <el-card style="background: black;">
        <div>
          <el-button type="primary" style="width: 100px;height: 40px;border-radius: 6px;margin: 10px 0px 10px 10px;">
            {{ leftText }}
          </el-button>
          <el-tooltip class="box-item" effect="light" content="点击切换" placement="top"
            >
              <el-icon style="font-size: 18px;margin: 15px 15px 0px 25px;;cursor: pointer;" @click="transverter">
                <component is="Switch"></component>
              </el-icon>
          </el-tooltip>
          <el-button type="primary" style="width: 100px;height: 40px;border-radius: 6px;margin: 10px 0px 10px 10px;">
            {{ rightText }}
          </el-button>
        </div>
        <div class="content">
          <div class="left">
            <el-form>
              <el-form-item label="" prop="content" label-width="5px">
                <el-input show-word-limit v-model="translateBefore" placeholder="请输入需要翻译的内容" type="textarea" maxlength="100" />
              </el-form-item>
            </el-form>
          </div>
          <div class="main">
            <el-button type="primary" style="width: 130px;height: 50px;border-radius: 8px;margin-bottom: 15px;" @click="onturn">
              翻译
            </el-button>
            <el-button type="danger" style="width: 130px;height: 50px;border-radius: 8px;margin-right: 10px;" @click="clean">
              清空
            </el-button>
          </div>
          <div class="right">
            <el-form>
              <el-form-item label="" prop="content" label-width="5px">
                <el-input show-word-limit v-model="translateAfter" placeholder="请输入内容后进行等待" type="textarea" disabled />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()

const leftText = ref<string>('英文')
const rightText = ref<string>('中文')
const from = ref<string>('en')
const to = ref<string>('zh')
const translateBefore = ref<string>('')
const translateAfter = ref<string>('')

const transverter = () => {
  if (leftText.value == '中文') {
    leftText.value = '英文'
    from.value = 'en'
  } else {
    leftText.value = '中文'
    from.value = 'zh'
  }
  if (rightText.value == '中文') {
    rightText.value = '英文'
    to.value = 'en'
  } else {
    rightText.value = '中文'
    to.value = 'en'
  }
}

const reqTranslateInfo = (data: any) => request.post<any, any>(`https://route.showapi.com/32-10?showapi_appid=1505398&showapi_sign=38a5f6fb1abe4355bc2f0d5435372138&data=0424&q=${translateBefore.value}&from=${from.value}&to=${to.value}`, data)
const onturn = () => {
  if (translateBefore.value == '') {
    ElMessage({
      type: 'warning',
      message: '请输入要翻译的内容'
    })
  } else {
    reqTranslateInfo({
      // showapi_appid: '1505398', //这里需要改成自己的appid
      // showapi_sign: '38a5f6fb1abe4355bc2f0d5435372138',  //这里需要改成自己的应用的密钥secret
      q: translateBefore.value,
      from: from.value,
      to: to.value
    }).then(res => {
      console.log('res', res)
      if (res.showapi_res_body.ret_code == 0) {
        translateAfter.value = res.showapi_res_body.translation
      } else {
        ElMessage({
          type: 'error',
          message: res.showapi_res_error || res.showapi_res_body.remark
        })
      }
    })
  }
}

const clean = () => {
  translateBefore.value = ''
  translateAfter.value = ''
}

onMounted(() => {

})

</script>

<style lang="scss" scoped>
.translateContent {
  width: 100%;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .translateMain {
    margin-top: 20px;
    padding: 20px;

    .el-card {
      border-radius: 16px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);

      .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;

        .left {
          flex: 2;
          padding: 5px;

          :deep(.el-textarea__inner) {
            width: 100%;
            height: 55vh;
            border-radius: 8px;
          }
        }

        .main {
          flex: 0.5;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .right {
          flex: 2;
          padding: 5px;

          :deep(.el-textarea__inner) {
            width: 100%;
            height: 55vh;
            border-radius: 8px;
          }
        }
      }
    }
  }

}
</style>